<script setup>
import { ref } from 'vue';
import { useFormOperate } from '@/hooks/pages-repeat';
import { createApi, updataApi, getInfoApi } from '@/api/sys/user.js';
import { roleSelectApi } from '@/api/sys/role.js';
import { isEmail, isMobile, isPassword } from '@/utils/validate.js';

const emits = defineEmits(['modalClose'])
const { 
  dataFormRef,
  modalOpen,
  confirmLoading,
  detailLoading,
  dataForm,
  requestObj,
  submit,
  init
} = useFormOperate()

requestObj.value = {
  createApi,
  updataApi,
  getInfoApi,
  submitCallback: emits
}

dataForm.value = {
  id: undefined,
  username: '',
  realName: '',
  deptId: undefined,
  password: '',
  confirmPassword: '',
  gender: 0,
  email: '',
  mobile: '',
  status: 1,
  roleIdList: []
}

const rules = ref({
  username: [{ required: true, message: '请输入用户名!' }],
  realName: [{ required: true, message: '请输入真实姓名!' }],
  password: [
    {
      validator: (rule,value) => {
        if (!dataForm.value.id && !isPassword(value)) {
          return Promise.reject('密码长度在8-20位之间(必须包含数字，且字母和特殊字符至少包含一种)')
        }
        return Promise.resolve()
      }
    }
  ],
  confirmPassword: [
    {
      validator: (rule,value) => {
        if (!dataForm.value.id && !isPassword(value)) {
          return Promise.reject('密码长度在8-20位之间(必须包含数字，且字母和特殊字符至少包含一种)')
        }
        if (dataForm.value.password !== value) {
          return Promise.reject('两次密码输入不一致')
        }
        return Promise.resolve()
      }
    }
  ],
  email: [
    {
      validator: (rule,value) => {
        if (value && !isEmail(value)) {
          return Promise.reject('邮箱格式错误')
        }
        return Promise.resolve()
      }
    }
  ],
  mobile: [
    {
      validator: (rule,value) => {
        if (value && !isMobile(value)) {
          return Promise.reject('手机格式错误')
        }
        return Promise.resolve()
      }
    }
  ]
})

const roleSelectList = ref([])
const getRoleList = () => {
  roleSelectApi().then(({data:res}) => {
    roleSelectList.value = res.data
  })
}
getRoleList()

defineExpose({
  init
})

</script>

<template>
  <a-modal 
    width="40%"
    v-model:open="modalOpen" 
    :confirm-loading="confirmLoading"
    :title="dataForm.id ? '修改用户' : '新增用户'" 
    okText="确定"
    cancelText="取消"
    :maskClosable="false"
    :bodyStyle="{'padding': '20px'}"
    @cancel="emits('modalClose')"
    @ok="submit"
    >
    <a-spin :spinning="detailLoading">
      <a-form ref="dataFormRef" layout="vertical" :model="dataForm" :rules="rules" name="dataForm" autocomplete="off">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="用户名" name="username">
              <a-input v-model:value.trim="dataForm.username" placeholder="请输入用户名" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="所属部门" name="deptId">
              <DeptTreeSelect v-model:value.trim="dataForm.deptId" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="密码" name="password">
              <a-input v-model:value.trim="dataForm.password" type="password" placeholder="请输入密码" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="确认密码" name="confirmPassword">
              <a-input v-model:value.trim="dataForm.confirmPassword" type="password" placeholder="请再次输入密码" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="真实姓名" name="realName">
              <a-input v-model:value.trim="dataForm.realName" placeholder="请输入真实姓名" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="性别" name="gender">
              <a-radio-group v-model:value.trim="dataForm.gender" name="radioGroup">
                <a-radio :value="0">男</a-radio>
                <a-radio :value="1">女</a-radio>
                <a-radio :value="2">保密</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="邮箱" name="email">
              <a-input v-model:value.trim="dataForm.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="手机号" name="mobile">
              <a-input v-model:value.trim="dataForm.mobile" placeholder="请输入手机号" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="角色配置">
              <a-select
                v-model:value.trim="dataForm.roleIdList"
                mode="tags"
                style="width: 100%"
                placeholder="角色配置"
              >
                <a-select-option 
                  v-for="item in roleSelectList"
                  :value="item.id"
                  :key="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item  label="状态" name="gender">
              <a-radio-group v-model:value.trim="dataForm.status" name="radioGroup">
                <a-radio :value="0">停用</a-radio>
                <a-radio :value="1">正常</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<style lang="scss" scoped>

</style>